<template>
  <div class="project-container">
    <div class="project-title">欢迎使用自助终端收费系统</div>
    <div class="function-group">
      <div class="function-item-group">
        <div class="function-item function-item-bg" @click="gotoPage(1)">
          <div class="function-icon iconfont icon-baomingjiaofei"></div>
          <div class="function-text">缴费</div>
        </div>
      </div>
      <div class="function-item-group">
        <div class="function-item function-item-bg1" @click="gotoPage(2)">
          <div class="function-icon iconfont icon-chaxun"></div>
          <div class="function-text">查询缴费记录</div>
        </div>
      </div>
      <div class="function-item-group">
        <div class="function-item function-item-bg3" @click="gotoPage(3)">
          <div class="function-icon iconfont icon-yaopinchaxun"></div>
          <div class="function-text">价格公示</div>
        </div>
      </div>
    </div>
    <div class="scroll-left">
      <!-- <div class="scroll-text">滚动文字</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {

  },
  methods: {
    gotoPage(type) {
      if (type == 3) {
        this.$router.push({ path: '/drugsQuery' });
        return false;
      }
      this.$router.push({ path: '/login', query: { type } })
    }
  }
};
</script>
<style lang="less">
.project-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #cbe5f5, #deedf6);
  .project-title {
    padding: 160 * @hv 40 * @hv 40 * @hv 40 * @hv;
    font-size: 72 * @hv;
    font-weight: bold;
    color: #444;
    text-align: center;
  }
  .function-group {
    display: flex;
    padding: 10% 12% 0 12%;
    flex-wrap: wrap;
  }
  .function-item-group {
    width: 50%;
    padding: 30 * @wv;
  }
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 388 * @hv;
    border-radius: 10px;
    box-shadow: 1px 1px 4px -2px #888;
  }
  .function-icon {
    font-size: 100 * @hv;
    color: #fff;
  }
  .function-text {
    font-size: 50 * @hv;
    color: #fff;
    padding-top: 20 * @hv;
    white-space: nowrap;
  }
  .function-item-bg {
    background: linear-gradient(to bottom, #e1561f, #f5ea3d);
  }
  .function-item-bg1 {
    background: linear-gradient(to bottom, #139c4d, #80f8b3);
  }
  .function-item-bg3 {
    background: linear-gradient(to bottom, #075fa7, #80aaf8);
  }
  .scroll-left {
    padding: 20% 15% 0 15%;
  }
  .scroll-text {
    font-size: 50 * @hv;
    color: #c02014;
  }
}
</style>